<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      ul {
        width: 800px;
        height: 800px;
        border: 10px red solid;
        /* 设置ul为弹性容器 */
        display: flex;

        /* flex-direction: column; */

        /* 
            flex-wrap:
                设置弹性元素是否在弹性容器中自动换行。
                可选值:
                    nowrap 默认值,元素不会自动换行
                    wrap 元素沿着辅轴方向自动换行
                    wrap-reverse 元素沿着主轴反方向换行
            
            flex-flow: wrap 和 direction的简写属性
        */
        /* flex-flow: row wrap; */
        /* flex-wrap: wrap; */
        /* 
            justify-content
                - 如何分配主轴上的空白空间(主轴上的元素如何排列)
                - 可选值:
                    flex-start 元素沿着主轴起边排列
                    flex-end 元素沿着主轴的终边排列
                    center 元素居中排列
                    space-around 空白分布到元素的两侧
                    space-between 空白均匀分布到元素间
                    space-evenly 空白分布到元素的单侧
        */
        /* justify-content: center; */

        /* 
          align-items:
            - 元素在辅轴上如何对齐
            - 元素间的关系
                - 可选值:
                  stretch 默认值, 将元素的长度设置为默认值
                  flex-start 元素不会拉伸,沿着辅轴起边对齐
                  flex-end 沿着辅轴的终点对齐
                  center 居中对齐
                  baseline 基线对齐
        */

        align-items: center;
        justify-self: center;
        flex-flow: row wrap;

        /* 
          align-content:
                    主轴上有空白空间,辅轴上也有空白空间
        */
        align-content: center;
      }

      li {
        width: 200px;
        background-color: #bfa;
        font-size: 50px;
        text-align: center;
        line-height: 100px;

        flex-shrink: 0;
      }

      li:nth-child(1) {
        background-color: #bfa;
      }

      li:nth-child(2) {
        background-color: pink;
      }

      li:nth-child(3) {
        background-color: orange;
      }

      li:nth-child(4) {
        background-color: yellow;
      }

      li:nth-child(5) {
        background-color: chocolate;
      }

    </style>
  </head>
  <body>
    <ul>
      <li>1</li>
      <li>2
        <div>2</div>
      </li>
      <li>3
        <div>3</div>
        <div>3</div>
      </li>

      <li>1</li>

      <li>2
        <div>2</div>
      </li>
    </ul>
  </body>
</html>
